<template>
  <div class="hot">
    <div class="topTitle">
        <div class="hotsong">
            <div>更新日期:10月26日</div>
        </div>
    </div>
    <loading v-if="showList.length==0"></loading>
    <music-list @play="$emit('play',$event)" :songlist="showList" :shownum="true" v-else></music-list>
    <div ref="bottom" class="loadingmore" @click="loadMore">{{this.page>=5?"到底了...":"加载更多"}}</div>
  </div>
</template>

<script>
import MusicList from '@/components/MusicList'
export default {
  name: 'Hot',
  data(){
    return {
      hotList:[],
      page:1//记录第几页
    }
  },
  created(){
    this.axios.get("/playlist/detail",{params:{id:3778678}})
    .then(result=>{
      let musiclist=result.playlist.tracks.map((v,index)=>{
        //为了重用musicList组件，里面数据格式转化，添加一个song属性.
        v.song={
          privilege:result.privileges[index],//码率
          artists:v.ar,//歌手转化为artists
          album:v.al//专辑转化为album
        }
        return v;
      });
      this.hotList=musiclist;//.splice(0,20);
    })
  },
  mounted(){
    //  window.addEventListener("scroll",this.windowScroll);
  },
  beforeRouteEnter(to,from,next){
    next(vm=>{
      window.addEventListener("scroll",vm.windowScroll);
    });
  },
  beforeDestroy(){
    window.removeEventListener("scroll",this.windowScroll);
  },
  beforeRouteLeave(to,from,next){
    console.log("leavef- --")
    window.removeEventListener("scroll",this.windowScroll);
    next();
  },
  methods:{
    loadMore(){
      if(this.page>=10){
        return;
      }
      this.page++;
    },
    windowScroll(){
        console.log("滚动dd",window.scrollY,window.innerHeight,this.$refs.bottom.offsetTop);
        //判断滚动距离 Y + 窗口大小 > 最后一个元素距离上面的距离，证明就到底了，就加载更多.
        if(window.scrollY+window.innerHeight>this.$refs.bottom.offsetTop){
          this.loadMore()
        }
    }
  },
  computed:{
    showList(){
        if(this.hotList.length>0){
          let endPos=this.page*20;// 0-20  0-40 0-60
          //splice截取 或 删除改变原数组
          //slice 复制数组片段.
          return this.hotList.slice(0,endPos);
        }
        return [];
    }
  },
  components: {
    MusicList
  }
}
</script>

<style lang="less" scoped>
.topTitle{
  width:100vw;
  height:39vw;
  background:url(../assets/hot_music_bg_2x.jpg) no-repeat;
  background-size: cover;
  position: relative;
  &::after{
    content:"";
    position: absolute;
    left:0px;
    top:0px;
    right:0px;
    bottom: 0px;
    background: rgba(0, 0, 0, 0.2);
    z-index:1;
  }
  .hotsong{
    top:50%;
    left:20px;
    z-index:2;
    transform: translateY(-50%);
    position: absolute;
    &>div{
      font-size:12px;
      color:white;
    }
  }
}
.loadingmore{
  text-align: center;
  line-height:80px;
  color:#888;
}

</style>
